import { billType } from "@/types";
import { View, Text } from "@tarojs/components";
import React, { useEffect, useMemo, useState } from "react";
import BillList from "@/components/billList";
import BillForm from "@/components/billForm";
import viewMode from "@/store/viewMode";
import account from "@/store/account";
import Taro from "@tarojs/taro";
import http from "@/request";
import { ShowToast } from "@/utils";

const BillImportList: React.FC<{
    bills: billType[],
    onDelete: (bill: billType) => void
    onFinish: () => void
}> = ({ bills, onDelete, onFinish }) => {
    const [formVisible, setFormVisible] = useState<boolean>(false)
    const [billList, setBillList] = useState<billType[]>([])
    const [bill, setBill] = useState<billType & { id: number, category: number }>()

    useEffect(() => {
        viewMode.setBehind(formVisible)
    }, [formVisible])

    useEffect(() => {
        setBillList(bills)
    }, [bills])

    const closeModal = () => {
        setFormVisible(false)
    }

    const openEdit = (bill) => {
        setFormVisible(true)
        setBill(bill)
    }

    const memberNames = useMemo(() => {
        return account.accountList?.reduce((obj, acc) => {
            const names = acc.members?.reduce((sum, item) => {
                return {
                    ...sum,
                    [item.userId || '']: item.userName
                }
            }, {})
            return {
                ...obj,
                ...names
            }
        }, {})
    }, [account.accountList])

    const saveBill = (bill) => {
        const list = billList.map(item => {
            const billItem = item.id === bill.id ? bill : item
            billItem.userName = memberNames[billItem.userId]
            return billItem
        })
        setBillList([...list])
        setFormVisible(false)
    }

    const [showNum, setShowNum] = useState(10)
    const showList = useMemo(() => {
        return billList.slice(0, showNum)
    }, [billList, showNum])

    const showMore = () => {
        if (showNum < billList.length) {
            setShowNum((val) => val + 10)
        }
    }

    const saveBatch = () => {
        http.post('/bills/addBatch', billList).then(res => {
            const { success, fail } = res.data
            Taro.showModal({
                title: '数据导入完成',
                content: `成功${success}条，失败${fail}条`,
                showCancel: false
            }).then(_ => {
                onFinish()
                viewMode.refresh()
            }).catch(err => {
                ShowToast(err.msg || '导入数据失败')
            })
        })
    }

    return (
        <View className="import-list-container flex-column flex1">
            <BillList
                className="import-list-card card-background"
                title="待保存账单"
                showAccountName
                onDelete={onDelete}
                onEdit={openEdit}
                bills={showList}>
            </BillList>
            <BillForm
                visible={formVisible}
                onClose={closeModal}
                onSava={saveBill}
                bill={bill}>
            </BillForm>
            <View onClick={showMore} className="loading font-size28">
                {showNum < billList.length ? 
                <><Text>还有{billList.length - showNum}条未展示，点击查看更多</Text><Text className="iconfont icon-base-right"></Text></> : 
                <Text>已展示全部{billList.length}条数据</Text>
                }
            </View>
            <View className="section font-size28 card-background">
                <View className="title">确认数据无误后，点击下方按钮</View>
                <View className="content">
                    <View className="sub-section">系统未对账单进行重复性校验，请勿反复导入</View>
                </View>
                <View onClick={saveBatch} className="invite-btn border-main-color flex-row flex-center">
                    <Text className="iconfont icon-shangchuan"></Text>
                    <Text>确认导入{billList.length}条数据</Text>
                </View>
            </View>
        </View>
    )
}

export default BillImportList